import React, { useCallback, useRef } from 'react';
import { Picker } from '@ray-js/smart-ui';
import { Text, View, showToast } from '@ray-js/ray'; // 导入基础 UI 组件
import styles from './index.module.less'; // 引入模块化样式
import BottomComfimView from '../BottomComfimView';

export function TimerTimeSectorDialog({ onTimeListener, startTime, endTime }: { onTimeListener: (start: number, end: number) => void, startTime: number, endTime: number }) {

  const timeHour = ["00", "01", "02", "03", "04",
    "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15",
    "16", "17", "18", "19", "20", "21", "22", "23"
  ];

  const timeMin = [
    "00", "01", "02", "03", "04",
    "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15",
    "16", "17", "18", "19", "20", "21", "22", "23", "24", "25",
    "26", "27", "28", "29", "30", "31", "32", "33", "34", "35",
    "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50",
    "51", "52", "53", "54", "55", "56", "57", "58", "59"
  ];


  const mCurrentStart = useRef(startTime); //保存默认的开始时间
  const mCurrentEnd = useRef(endTime); //保存默认的结束时间

  let startHourIndex = Math.floor(startTime / 60);
  let startMinIndex =  startTime % 60;
  let endHourIndex = Math.floor(endTime / 60);
  let endMinIndex =  endTime % 60;

  if(startTime === 0&&endTime === 0){//如果都為0，則默认给
     endMinIndex=1;  
     mCurrentEnd.current=1;
  }

  const columnStart = [
    {
      values: timeHour,
      style: { flex: 'none', width: 'auto', minWidth: '61px' },
      defaultIndex: startHourIndex,
    },
    {
      values: timeMin,
      style: { flex: 'none', width: 'auto', minWidth: '61px' },
      defaultIndex: startMinIndex,
    },
  ];

  const columnEnd = [
    {
      values: timeHour,
      style: { flex: 'none', width: 'auto', minWidth: '61px' },
      defaultIndex: endHourIndex,
    },
    {
      values: timeMin,
      style: { flex: 'none', width: 'auto', minWidth: '61px' },
      defaultIndex: endMinIndex,
    },
  ];


  const onChangeStart = useCallback(event => {
    const { value, index } = event.detail;
     mCurrentStart.current = parseInt(value[0]) * 60 + parseInt(value[1]);
    console.log(`Value-开始时间: ${value}, Index：${index}`);
  }, []);

   const onChangeEnd = useCallback(event => {
    const { value, index } = event.detail;
     mCurrentEnd.current = parseInt(value[0]) * 60 + parseInt(value[1]);
    console.log(`Value-结束时间: ${value}, Index：${index}`);
  }, []);


  return (
    <View className={styles.overlayout} onClick={() => { onTimeListener(-1, -1) }}>
      <View className={styles.view}>
        <View className={styles.background} style={{ justifyContent: 'center', alignItems: 'center', paddingLeft: '30rpx', paddingRight: '30rpx' }} >
          <Text style={{ flex: 1, color: 'white', fontSize: '18px', textAlign: 'center' }}>开始</Text>
          <View style={{ width: '70rpx' }} />
          <Text style={{ flex: 1, color: 'white', fontSize: '18px', textAlign: 'center' }}>结束</Text>
        </View>
        <View style={{ display: 'flex', position: 'relative', width: '100%', height: 'fit-content', flexDirection: 'row', alignItems: 'center', paddingLeft: '30rpx', paddingRight: '30rpx' }}>
          <Picker
          itemHeight={34}
            className={styles.picker}
            defaultIndex={0}
            columns={columnStart}
            onChange={onChangeStart}
          />

          <View style={{ backgroundColor: 'white', height: '1px', width: '70rpx' }} />
          
          <Picker
            itemHeight={34}  
            className={styles.picker}
            defaultIndex={0}
            columns={columnEnd}
            onChange={onChangeEnd}
          />
          <View style={{ pointerEvents: 'none', position: 'absolute', width: '90vw', height: '70rpx', backgroundColor: 'rgba(255, 255, 255, 0.1)', borderRadius: '16rpx', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }} />
        </View>
        <View style={{ height: '125rpx' }} />
      </View>

      <BottomComfimView onSave={() => {
        console.log('onTimeListener-108', mCurrentStart.current, mCurrentEnd.current);
        onTimeListener(mCurrentStart.current, mCurrentEnd.current);
      }} onCancle={() => { onTimeListener(-1, -1) }} />
    </View>
  );
}
export default TimerTimeSectorDialog;    